// @ts-nocheck
import { Component } from 'vue';

import {
  SUBFORM_FIELDS_DISABLED,
  SUBFORM_FIELDS_ADD_LENGTH_MAX
} from '@src/component/form/config';
import { t } from '@src/locales'

const SUBFORM_FIELDS_PLACEHOLDER = t('common.form.preview.subForm.tipPlaceHolder');

const FORM_SUBFORM: Component = {
  name: 'form-subForm-mixin',
  data() {
    return {
      max: SUBFORM_FIELDS_ADD_LENGTH_MAX,
      placeHolder: SUBFORM_FIELDS_PLACEHOLDER
    };
  },
  computed: {
    /** 是否系统字段 */
    isSystem() {
      return this.field.isSystem === 1;
    },
    /** 子表单字段 */
    subformFields() {
      return this.field?.subFormFieldList || [];
    },
    /** 子表单系统字段 */
    systemFields: {
      get() {
        return this.subformFields.filter(field => field.isSystem == 1);
      },
      set(value) {
        let subFormFieldList = value.concat(this.customFields);
        this.update(subFormFieldList, 'subFormFieldList');
      }
    },
    customFields: {
      get() {
        return this.subformFields.filter(field => field.isSystem == 0);
      },
      set(value) {
        value.forEach(field => {
          field.parentFieldId = this.field.fieldName
        })
        let subFormFieldList = this.systemFields.concat(value);
        this.$set(this.field, 'subFormFieldList', subFormFieldList);
      }
    }
  },
  methods: {
    dragValChange(dragAfterValues) {
      this.customFields = dragAfterValues;
    },
    /** 子表单拖拽验证 */
    validate(field) {
      // 限制字段数量
      if (this.customFields.length > this.max)
        return t('common.form.preview.subForm.maxFields', {max: this.max});

      // 禁止拖拽到子表单中的控件
      if (
        field.isSystem === 1 || field.isSubForm || 
        SUBFORM_FIELDS_DISABLED.indexOf(field.formType) > -1
      ) {
        return t('common.form.preview.subForm.notSupportTip');
      }
    },
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    }
  }
};

export default FORM_SUBFORM;
